import 'dart:convert';
import 'dart:ui';

import 'package:demo/components/search_select_dialog.dart';
import 'package:demo/pages/tian_shu/tian_shu_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_htmlful/Div.dart';
import 'package:flutter_htmlful/Style.dart';

class TianShuPage extends StatefulWidget {
  const TianShuPage({super.key});

  @override
  State<TianShuPage> createState() => _TianShuPageState();
}

class _TianShuPageState extends State<TianShuPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TianShuCubit(),
      child: BlocBuilder<TianShuCubit, TianShuState>(
        builder: (BuildContext context, TianShuState state) {
          context.read<TianShuCubit>().readFile();
          return SafeArea(
            child: Scaffold(
              appBar: AppBar(
                title: const Text('title'),
                actions: [
                  IconButton(
                      onPressed: () {
                        showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return SearchSelectDialog(
                              callback: (result) {
                                debugPrint('$result');
                              },
                            );
                          },
                        );
                      },
                      icon: const Icon(
                        Icons.add,
                        color: Colors.black,
                      ))
                ],
              ),
              body: Div(
                style: Style(
                  backgroundColor: Colors.white,
                  height: double.infinity,
                  width: double.infinity,
                ),
                body: [
                  Div(
                    style: Style(direction: Axis.horizontal, crossAxisAlignment: CrossAxisAlignment.stretch, height: 30),
                    body: [
                      Div(
                        style: Style(flexGrow: 1, width: 0, crossAxisAlignment: CrossAxisAlignment.center),
                        body: const Center(
                          child: Text('A'),
                        ),
                      ),
                      Div(
                        style: Style(width: 100, crossAxisAlignment: CrossAxisAlignment.center, backgroundColor: Colors.blue),
                        body: const Center(
                          child: Text(
                            '时间',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        inkWell: InkWell(
                          onTap: () {
                            context.read<TianShuCubit>().readFile();
                          },
                        ),
                      ),
                      Div(
                        style: Style(flexGrow: 1, width: 0, crossAxisAlignment: CrossAxisAlignment.center),
                        body: const Center(
                          child: Text('B'),
                        ),
                      )
                    ],
                  ),
                  Div(
                    style: Style(flexGrow: 1),
                    body: ListView.builder(
                      itemCount: state.data?.length ?? 0,
                      itemBuilder: (context, i) {
                        var first = state.data[i] as Map<String, dynamic>?;
                        var widget = Div(
                          style: Style(
                            backgroundGradient: const LinearGradient(
                              colors: [Color(0xffF3D091), Color(0xffDE9D2F)],
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                            ),
                          ),
                          body: [
                            EventsWidget(
                              data: first,
                              title: first?['year'] + '年',
                              titleBackgroundColor: const Color(0xaa4A5DE2),
                            ),
                            ...(first?['children'] as List)
                                .map(
                                  (second) => Div(
                                    body: [
                                      Div(
                                        style: Style(
                                          backgroundGradient: const LinearGradient(
                                            colors: [Color(0xff85B2D4), Color(0xff6F86A8)],
                                            begin: Alignment.topCenter,
                                            end: Alignment.bottomCenter,
                                          ),
                                          marginLeft: 10,
                                          marginRight: 10,
                                          isIntrinsicHeight: true,
                                        ),
                                        body: [
                                          EventsWidget(
                                            data: second,
                                            title: second['month'] + '月',
                                            titleBackgroundColor: const Color(0xaa394cd1),
                                          ),
                                          ...(second?['children'] as List)
                                              .map(
                                                (third) => EventsWidget(
                                                  marginLeft: 10,
                                                  marginRight: 10,
                                                  data: third,
                                                  backgroundGradient: const LinearGradient(
                                                    colors: [Color(0xffEFF3FF), Color(0xffD7E1FE)],
                                                    begin: Alignment.topCenter,
                                                    end: Alignment.bottomCenter,
                                                  ),
                                                  title: third['day'] + '日',
                                                  titleBackgroundColor: const Color(0xaa283bc0),
                                                ),
                                              )
                                              .toList()
                                        ],
                                      ),
                                    ],
                                  ),
                                )
                                .toList()
                          ],
                        );
                        return widget;
                      },
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

class EventsWidget extends StatelessWidget {
  double marginLeft;
  double marginRight;
  dynamic data;
  Gradient? backgroundGradient;
  String title;
  Color titleBackgroundColor;

  EventsWidget({
    super.key,
    this.marginLeft = 0,
    this.marginRight = 0,
    required this.data,
    this.backgroundGradient,
    required this.title,
    required this.titleBackgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    return Div(
      style: Style(
        marginLeft: marginLeft,
        marginRight: marginRight,
        backgroundGradient: backgroundGradient,
      ),
      body: Div(
        style: Style(
          isIntrinsicHeight: true,
          direction: Axis.horizontal,
        ),
        body: [
          Div(
            style: Style(flexGrow: 1, width: 0),
            body: (data?['events'][0] as List).map((item) {
              return Container(
                padding: const EdgeInsets.all(10),
                child: Text(item['title']),
              );
            }).toList(),
          ),
          Div(
            style: Style(
              width: 100,
              padding: 10,
              height: double.infinity,
              crossAxisAlignment: CrossAxisAlignment.center,
              backgroundColor: titleBackgroundColor,
            ),
            body: [
              Text(
                title,
                style: const TextStyle(color: Colors.white),
              )
            ],
          ),
          ...(data?['events'] as List)
              .skip(1)
              .map(
                (element) => Div(
                  style: Style(flexGrow: 1, width: 0),
                  body: (element as List).map((item) {
                    return Container(
                      padding: const EdgeInsets.all(10),
                      child: Text(item['title']),
                    );
                  }).toList(),
                ),
              )
              .toList()
        ],
      ),
    );
  }
}
